<template>
  <el-dialog v-draggable title="查看信息" :visible.sync="dialogVisible" width="50vw">
    <common-table show-index show-check-box :columns="columns" :list="list" tableHeight="40vh">
    </common-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" icon="el-icon-close">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
  import { queryDeviceGztkDetail } from "@/api/showManage/index"

  export default {
    props: {
      dialogVis: {
        type: Boolean,
        default: () => false
      },
      batchCode: {
        type: String
      },
      deviceCode: {
        type: String
      }
    },
    components: {
      CommonTable
    },
    data() {
      return {
        columns: [
          {
            title: "参数编码",
            prop: "parameterCode",
            align: "center"
          },
          {
            title: "参数名称",
            prop: "parameterName",
            align: "center"
          },
          {
            title: "值",
            prop: "parameterValue",
            align: "center"
          },
          {
            title: "值名称",
            prop: "parameterValueName",
            align: "center"
          }
        ],
        list: []
      }
    },
    created() {
    },
    mounted() {
      this.getTableList()
    },
    computed: {
      dialogVisible: {
        get: function() {
          return this.dialogVis
        },
        set: function(v) {
          this.$emit("update:dialogVis", v)
        }
      }
    },
    methods: {
      async getTableList() {
        const { status, success, object, message } = await queryDeviceGztkDetail({ batchCode: this.batchCode, deviceCode: this.deviceCode })
        if (status == 200) {
          this.list = object
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__footer {
      text-align: center !important;
    }
  }

  ::v-deep .el-dialog__header {
    border-radius: 8px 8px 0 0;
    background-color: #e6e6e6;
  }

  .ml-3 {
    margin-left: 12px;
  }


  .my_span {
    font-size: 16px;
  }

  .my_table {
    margin-top: 16px;
  }

  .dialog-foote {
    text-align: center;
  }
</style>
